<script>
import SlUpload from '@/components/SlUpload/SlUpload.vue'

export default {
  name: 'chauLicenseForm',
  components: { SlUpload },
  data() {
    return {
      formData: {},
      fileList: []
    }
  },
  methods: {
    /*
    * 获取司机驾驶证信息的回调函数
    *  */
    async fetchLicenseInfo() {
      try {
        const detail = await this.$store.dispatch('chauffeurStore/fetchLicenseInfoAction', this.id)
        this.formData = detail
        this.fileList.push({ url: detail.picture.split(',')[0] })
        this.fileList.push({ url: detail.picture.split(',')[1] })
      } catch (error) {
        this.$message.error(error.message)
      }
    }
  },

  computed: {
    id() {
      return this.$route.query.id
    }
  },
  mounted() {
    this.fetchLicenseInfo()
  },
  watch: {
    fileList: {
      handler(newValue, oldValue) {
        this.formData.picture = newValue.map(item => item.url).join(',')
      },
      immediate: true
    }
  }
}
</script>

<template>
  <div class="chau-license-form">
    <el-form inline :model="formData">
      <el-form-item label="驾驶证号：">
        <el-input placeholder="请输入驾驶证号" v-model="formData.licenseNumber"></el-input>
      </el-form-item>
      <el-form-item label="准驾车型：">
        <el-input placeholder="请输入准驾车型" v-model="formData.allowableType"></el-input>
      </el-form-item>
      <el-form-item label="领证日期：">
        <el-date-picker value-format="yyyy-MM-dd" type="date" placeholder="选择日期" v-model="formData.initialCertificateDate"></el-date-picker>
      </el-form-item>
      <el-form-item label="有效期限：">
        <el-date-picker value-format="yyyy-MM-dd" type="date" placeholder="选择日期" v-model="formData.validPeriod"></el-date-picker>
      </el-form-item>
      <el-form-item label="司机驾龄：">
        <el-input placeholder="请输入驾龄" v-model="formData.driverAge"></el-input>
      </el-form-item>
      <el-form-item label="驾驶证类型：">
        <el-input placeholder="请输入驾驶证类型" v-model="formData.licenseType"></el-input>
      </el-form-item>
      <el-form-item label="驾驶证图片：" style="width: 100%; display: flex;align-items: center;">
        <sl-upload v-model="fileList"></sl-upload>
      </el-form-item>
    </el-form>
  </div>
</template>

<style scoped lang="scss">
.el-form-item {
  width: 380px;

  .el-input {
    width: 125%;
  }

  .el-date-editor {
    width: 240px;
  }
}
</style>
